<template>
    <div class="login-container">
        <el-card body-class="login-form" class="login-box">
            <template #header>
                <div class="login-header">
                    <h1>企业资源计划后台管理</h1>
                </div>
            </template>
            <el-form
                ref="formRef"
                v-loading="loading"
                :element-loading-text="loadingText"
                :model="formData"
                :rules="rules"
                label-position="top"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="formData.username" placeholder="请输入用户名" size="large"/>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input
                        v-model="formData.password"
                        placeholder="请输入密码"
                        show-password
                        size="large"
                        type="password"
                    />
                </el-form-item>

                <el-form-item prop="rememberMe">
                    <el-checkbox v-model="formData.rememberMe" size="large">
                        1 天内无需登陆
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <template #default>
                        <el-button
                            block
                            round
                            size="large"
                            style="width: 100%"
                            type="primary"
                            @click="handleSubmit"
                            @keydown.enter="handleSubmit"
                        >
                            登录
                        </el-button>
                    </template>
                </el-form-item>
                <el-form-item>
                    <template #default>
                        <div style="font-size: 12px;width: 100%;line-height: 20px">
                            <span>账号：admin 密码: 123456</span>
                        </div>
                    </template>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {useRouter} from "vue-router";
import {useAccountStore} from "@/store/account.store.js";
import {usePermissionStore} from "@/store/permission.store.js";

const router = useRouter();
const formRef = ref();

const formData = ref({
    username: "",
    password: "",
    rememberMe: false,
});

const rules = ref({
    username: [
        {required: true, message: "请输入用户名", trigger: "blur"},
        {min: 2, max: 20, message: "长度在 3 到 20 个字符之间", trigger: "blur"},
    ],
    password: [
        {required: true, message: "请输入密码", trigger: "blur"},
        {min: 6, max: 20, message: "长度在 6 到 20 个字符之间", trigger: "blur"},
    ],
});

const accountStore = useAccountStore();
const loading = ref(false);
const loadingText = ref("");

async function handleSubmit() {
    setTimeout(() => {
        loadingText.value = "正在加载中..."
    }, 1000)
    setTimeout(() => {
        loadingText.value = "请耐心等待..."
    }, 2000)
    setTimeout(() => {
        loadingText.value = "初次加载可能较为缓慢..."
    }, 5000)
    try {
        await formRef.value.validate().then(async () => {
            loading.value = true;
            let resp = await accountStore.login(formData.value);
            if (resp) {
                // 跳转到目标页（优先使用 redirect 参数）
                const redirect = router.currentRoute.value.query.redirect || usePermissionStore().activeRoute;
                await router.replace(redirect || "/");
            }
            loading.value = false;
        });

    } catch (error) {
        ElMessage.error(error)
    }
    loadingText.value = ""
}

onMounted(async () => {
    let isAuthenticated = await accountStore.authenticated();
    if (isAuthenticated) {
        ElMessage.success("欢迎登陆！")
        // 跳转到目标页（优先使用 redirect 参数）
        const redirect = router.currentRoute.value.query.redirect || usePermissionStore().activeRoute;
        await router.replace(redirect || "/");
    }
})

</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
}

.login-box {
    width: 400px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
